<template>
  <div class="recommend" ref="recommend">
    <div class="head">
          <router-link tag="div"  class="search" to="/search">
              <i class="icon-font icon-search">&#xe6ac;</i> 
              <input type="text" readonly="readonly" placeholder="搜索商品，请输入关键词">
          </router-link>        
        <i class="icon-font  icon-remind">&#xe713;</i>
    </div>    
    <scroll ref="scroll" class="recommend-content" :data="tiplists">
      <div>
        <div v-if="recommends.length" class="slider-wrapper">
          <div class="slider-content">
            <slider ref="slider">
              <div v-for="(item,index) in recommends" :key="index">
                <a>
                  <img class="needsclick" @load="loadImage" :src="item.picUrl">
                </a>
              </div>
            </slider>
          </div>
        </div>
        <div class="division"></div>
        <mid-tab></mid-tab>
        <div class="division"></div>
        <div class="recommend-list">
          <h1 class="list-title">猜你喜欢</h1>
          <product-list  @select="selectItem"  ref="product-list" :data="tiplists"></product-list>
        </div>
      </div>
      <div class="loading-container" v-show="!tiplists.length">
        <loading></loading>
      </div>
    </scroll>
    <router-view></router-view>
  </div>
</template>

<script>
  import Slider from 'base/slider/slider'
  import Scroll from 'base/scroll/scroll'
  import Loading from 'base/loading/loading'  
  import ProductList from 'base/product-list/product-list'  
  import MidTab from 'components/mid-tab/mid-tab'  
  import {getRecommend,getTiplists} from 'api/recommend'
  import {ERR_OK} from 'api/config'
  import {mapMutations} from 'vuex'
  export default {
    data() {
      return {
        recommends: [],
        tiplists:[]
      }
    },
    created() {
      this._getRecommend()
      this._getTiplists()
    },
    methods: {
      loadImage() {
        if (!this.checkloaded) {
          this.checkloaded = true
          this.$refs.scroll.refresh()
        }
      },
      selectItem(item) {
        this.$router.push({
          path: `/index/${item.id}`
        })
        this.setDetail(item)
      },      
      _getRecommend() {
        getRecommend().then((res) => {
          if (res.code === ERR_OK) {
            this.recommends = res.data.slider
          }
        })
      },
      _getTiplists() {
        getTiplists().then((res) => {
          if (res.code === ERR_OK) {
            this.tiplists = res.data.list
          }
        })
      },
      ...mapMutations({
        setDetail: 'SET_DETAIL'
      })            
    },
    components: {
      Slider,
      Scroll,
      Loading,
      ProductList,
      MidTab
    }
  }
</script>
<style scoped lang='scss' type="text/css">
  @import "~common/scss/variable.scss";
  @import "~common/scss/mixin.scss";
  .head{
    height:45px;
    background-color: rgba(255,255,255,0.9);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    margin: 0 auto;
    border-bottom: 0 none;
         position: fixed;
        top: 0;
        left: 50%;
        -webkit-transform: translate3d(-50%,0,0);
        -ms-transform: translate3d(-50%,0,0);
        transform: translate3d(-50%,0,0);    
}
.search{
    height:30px;
    line-height:30px;
    margin: 7px 0 7px 15px;
    background-color:#f1f2f4;
    position:relative;
    border-radius:5px;
    width: 80%;
}
 .search>span{
    position:absolute;
    left:10px;
    top:4px;
    width:14px;
    height:14px;
} 
.search>input{
    margin-left:32px;
    font-size:14px;
    width:85%;
    height: 20px;
    line-height:20px;   
}

.head>span{
    position:absolute;
    right:25px;
    top: 14px;
    @include extend-click;
}
.head>i{
    font-size:16px;
    position:absolute;
    right:25px;
    font-style:normal;
    top: 12px;
    @include extend-click;
}


/* 图标 */
.icon-search{
    position:absolute;
    left:10px;
    top:5px;
    width:14px;
    height:14px;
} 
  .recommend{
    position: fixed;
    width: 100%;
    top: 48px;
    bottom: 64px;
    background:$color-highlight-background;
    .recommend-content{
      height: 100%;
      overflow: hidden; 
      .slider-wrapper{
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 40%;
        overflow: hidden;
        .slider-content{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;        	
        }
      }
      .recommend-list{
      	.list-title{
          height: 48px;
          line-height: 48px;
          text-align: center;
          font-size: $font-size-medium-x;
          color: $color-text-d;      		
      	}
      }      
      	
    }
    .sales{
        font-size:$font-size-medium;
        display:flex;
        display:-webkit-flex;
        justify-content:center;
        align-items:center;
        .flexes{
          flex:1;
          text-align:center;
          div{
              height:25px;
          }
          img{
                  display:block;
                  margin:10px auto;
                  width:55px;
                  height:55px;
            }          
        }
    }

  }
    .division{
        height:10px;
        background-color:$color-background;
    }
    .loading-container{
        position: absolute;
        width: 100%;
        top: 65%;
        transform: translateY(-50%);
    }

</style>